<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>用户添加</title>
    <link rel="stylesheet" href="/js/elementui/index.css">

    <style>
        .el-select .el-input .input-with-select {
            width: 50px;
        }
        .input-with-select .el-input-group__prepend {
            width: 50px;
            background-color: #fff;
        }
    </style>
</head>
<body>
<div id="app">
    <!--页面选择框部分（省市区级联框）-->
    <div class="block" style="float: left">
        <span class="demonstration">选择地区</span>
        <el-cascader
                v-model="value"
                :options="options"
                @change="handleChange"></el-cascader>


    </div>
    <!--搜索框-->

    <div style=" width: 600px ;float: right">

        <el-input placeholder="请输入内容" v-model="input3" class="input-with-select">
        <el-button slot="append" @click="findCustomer" icon="el-icon-search">查询</el-button>
    </el-input>
    </div>
    <div style="float: right;margin-top: 10px">
        客户名称:
    </div>
    <div style="clear: both;margin-bottom: 10px"></div>
    <!-- 客户信息显示-->
    <template>
        <el-button type="primary" @click="dialogFormVisible = true">手动添加</el-button>

        <!--分页的条数 -->
        <span style="float: left;font-size: 14px;margin-top: 5px">每页显示的条数:</span>
        <el-pagination
                layout="sizes"
                :page-sizes="[5, 10, 15, 20]"
                @size-change="handleSizeChange"
                :page-size="pageSize" style="float: left;margin-left: 5px">
        </el-pagination>
        <el-table
                :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
                style="width: 100%">
            <el-table-column
                    label="序号"
                    prop="id">
            </el-table-column>
            <el-table-column
                    label="客户名称"
                    prop="name">
            </el-table-column>
            <el-table-column
                    label="区域"
                    prop="address">
            </el-table-column>
            <el-table-column
                    label="主要经营"
                    prop="business">
            </el-table-column>
            <el-table-column
                    label="联系人"
                    prop="linkman">
            </el-table-column>
            <el-table-column
                    label="联系电话"
                    prop="telephone">
            </el-table-column>
            <el-table-column
                    label="返利">
                <template slot-scope="scope">
                    <span v-if="scope.row.rebate!=''&&scope.row.rebate!=null">
                        {{scope.row.rebate}}%
                    </span>
                </template>
            </el-table-column>
            <el-table-column
                    label="备注"
                    prop="note">
            </el-table-column>
            <el-table-column
                    label="合同有无"
                    prop="contract">
                <template slot-scope="scope">
                    <span v-if="scope.row.contract==1">
                        有
                    </span>
                    <span v-else>无</span>
                </template>
            </el-table-column>

            <el-table-column
                    align="right">
                <template slot="header" slot-scope="scope">
                    <el-input
                            v-model="search"
                            size="mini"
                            placeholder="输入关键字搜索"/>
                </template>
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    <el-button
                            size="mini"
                            ><a @click="contractApply(scope.$index, scope.row)">合作</a></el-button>

                </template>
            </el-table-column>
        </el-table>
    </template>
    <!--分页的下标-->
    <div style="float: right; margin-top: 10px">
        <el-pagination
                background
                layout="prev, pager, next"
                :total="total"
                @current-change="pageChange"
                :current-page="curr"
                :page-size="pageSize"
                >
        </el-pagination>
    </div>

    <!-- 弹出层-->
    <el-dialog title="客户" :visible.sync="dialogFormVisible">
        <el-form :model="customer">
            <el-form-item label="客户名称" :label-width="formLabelWidth">
                <el-input v-model="customer.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="客户地址" :label-width="formLabelWidth">
                <el-input v-model="customer.address" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="主要经营" :label-width="formLabelWidth">
                <el-input v-model="customer.business" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="联系人" :label-width="formLabelWidth">
                <el-input v-model="customer.linkman" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="联系电话" :label-width="formLabelWidth">
                <el-input v-model="customer.telephone" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="返利" :label-width="formLabelWidth">
                <el-input v-model="customer.rebate" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="备注" :label-width="formLabelWidth">
                <el-input v-model="customer.note" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="合同有无" :label-width="formLabelWidth">
                <el-input v-model="customer.contract" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
<!--            <el-button @click="deleteCustomer" type="danger">删 除</el-button>-->
            <el-button type="primary" @click="updateTable">确 定</el-button>
        </div>
    </el-dialog>
    <!--使用弹出层发送合作申请-->
    <!--<el-dialog title="合作对象" :visible.sync="dialogTableVisible">
        <el-table :data="customer">
            <el-table-column property="name" label="企业名称" width="150"></el-table-column>
            <el-table-column property="address" label="地址" width="150"></el-table-column>
            <el-table-column property="business" label="主要经营" width="150"></el-table-column>
            <el-table-column property="linkman" label="联系人" width="150"></el-table-column>
            <el-table-column property="telephone" label="联系电话" width="150"></el-table-column>
            <el-table-column property="rebate" label="返利" width="150"></el-table-column>
            <el-table-column property="note" label="备注" width="150"></el-table-column>
            <el-table-column property="contract" label="合同" width="150"></el-table-column>
        </el-table>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitContract">确 定</el-button>
        </div>
    </el-dialog>-->



</div>

<script src="/js/vue/vue.js"></script>
<script src="/js/axios/axios.min.js"></script>
<script src="/js/qs/qs.min.js"></script>
<script src="/js/elementui/index.js"></script>
<script src="/js/city/city.js"></script>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                //所有客户
                tableData: null,
                //单个客户
                customer: {
                    id: 0,
                    name: '',
                    address: '',
                    business: '',
                    linkman:'',
                    telephone: '',
                    rebate: 0,
                    note: '',
                    contract: 0,
                    create_time: '',
                    update_time: '',
                    create_user_id: '',
                    update_user_id: '',
                    site_id: ''
                },
                //输入框中的类容
                input3: '',
                //获取json中的数据
                city: city,
                value: [],
                options: [{}],
                //分页显示三要素
                //1.当前页
                curr: 0,
                //每页的条数
                pageSize: 5,
                //总条数
                total: 0,
                //客户搜索框
                search: '',
                //弹出层影藏参数
                dialogFormVisible: false,
                formLabelWidth: '120px',
                //关键字过滤
                filter:{

                }

            }
        },
        mounted() {
            this.prints()
            this.getJson()
            this.pageChange(1)
        },
        methods: {
            //打印输出json数据
            prints() {
                console.log(this.city)
                console.log(this.city[0].name)
                var ui = this.city
                for (var i in ui)
                    if (ui[i].name == '北京') {
                        console.log(ui[i].name)
                        console.log(ui[i].city[0].name)
                        console.log(ui[i].city[0].area[0])
                    }
                console.log(city.length)
                console.log(city[0].city.length)
                console.log(city[0].city[0].area.length)
            },
            //获取json数据
            getJson() {
                console.log(city[0].city[0].area[0])
                var parents
                var parent = []
                let i = 0
                for (i; i < city.length; i++) {

                    var children = []
                    var children2 = []
                    //console.log(city[i].name)
                    for (let j = 0; j < city[i].city.length; j++) {
                        //console.log(city[i].city[j].name)
                        for (let k = 0; k < city[i].city[j].area.length; k++) {
                            //console.log(city[i].city[j].area[k])
                            children2.push({value: city[i].city[j].area[k], lable: city[i].city[j].area[k]})
                        }
                        children.push({value: city[i].city[j].name, lable: city[i].city[j].name})
                        children.push({children: children2})
                    }
                    parent.push({value: city[i].name, lable: city[i].name})
                    parent.push({children: children})

                }
                // parents= JSON.parse(parent)
                //parent= JSON.parse(parents)
                console.log(city)

                let x =  JSON.stringify(city)
                this.options = parent
                console.log()
                console.log(parent[1].children[0])
                console.log(parent[0].lable)
                console.log(this.options)
            },
            //数据改变
            handleChange(value) {
                console.log(value);

            },
            handleSizeChange(val){
                this.pageSize=val;
                this.pageChange(1)
            },

            //分页显示请求发送
            pageChange(current) {
                axios.get("/customer?current=" + current+"&pageSize="+this.pageSize).then(value => {
                    if (value.data.code == 1) {
                        this.tableData = value.data.data.records
                        this.curr = value.data.data.current
                        this.pageSize = value.data.data.size
                        this.total = value.data.data.total
                    }
                })
            },
            //客户查询
            findCustomer() {
                //console.log(this.input3)
                axios.get("/findCustomer?key=" + this.input3).then(value => {
                    if (value.data.code == 1) {
                        this.tableData = value.data.data
                        this.curr = value.data.data.current
                        this.total = value.data.data.total
                    }
                })
            },
            //客户添加方法
            updateTable(){
                if(this.customer.id==''){
                    axios.post("/customer/customerAdd",this.customer).then(value => {
                        if(value.data.code==1){
                            this.pageChange(1)
                        }
                    })
                }else {
                    axios.put("/customer/customerUpdate",this.customer).then(value => {
                        this.pageChange(1)
                    })
                }
                this.dialogFormVisible = false

            },
            //删除客户方法
            deleteCustomer(){
                if(confirm("确定删除吗？")){
                    //发送删除请求
                    axios.delete("/deleteCustomer/")
                }
                this.pageChange(1)
            },
            //客户操作方法
            /*handleEdit(index, row) {
                console.log(row)
                axios.get("/contractApply").then(value => {

                })
            },*/
            handleDelete(index, row) {
                if(confirm("确定删除吗？")){
                    //发送删除请求
                    axios.delete("/deleteCustomer/"+row.id).then(value => {
                        if(value.data.code ==1){
                            this.pageChange(1)
                        }
                    })
                }
            },
            //每页显示条数改变
            changePageSize(){
                console.log(111)
                // this.pageSize = this.row.value
                // this.pageChange(this.current)
            },
            contractApply(index,row){
                axios.get("/contractApply/"+row.id).then(value => {
                    location.href="/customer/contractApply.html"
                })
            }



        }
    })
</script>
</body>

</html>